<template>
	<view class="flex-col page mtop" @touchmove="dropDown">
		<view class="navbar">
			<view class="back" @click="back">
				<u-icon name="arrow-left" size="45"></u-icon>
			</view>
			<text class="order">我的订单</text>
		</view>
		<u-sticky style="top:0" id="tabs">
			<view class="tab-bar .u-tabs__wrapper__nav__line">
				<u-tabs lineWidth="70" lineHeight="8" lineColor="#2d6fed" :activeStyle="{
			 	        color: '#000000',
			 	        fontWeight: 'bold',
			 	    }" :current="index" :list="list" @click='change'></u-tabs>
			</view>
		</u-sticky>
		<scroll-view :scroll-y="true" :style="{
			 height:scrollHeight+'px'
		 }" @scrolltolower="loadmore">
			<view class="flex-col ">
				<view class="flex-col">
					<view class="flex-col list" v-if="orders.length!=0">
						<view class="flex-col list-item" :key="i" v-for="(item, i) in orders"
							@click.stop="seeexplan(item)">
							<view class="share" v-if="item.foremanId">
								<text @click.stop="shareFriend(item.ordersId)">分享邀请工长</text>

							</view>
							<view class="justify-between group_6">
								<text class="text_7">订单编号：{{item.ordersNumber}}</text>
								<text class="text_9" v-if="item.ordersStatus == 1">待付款</text>
								<text class="text_9" v-else-if="item.ordersStatus == 2">待完善</text>
								<text class="text_9" v-else-if="item.ordersStatus == 3">进行中</text>
								<text class="text_9" v-else-if="item.ordersStatus == 4">待评价</text>
								<text class="text_9" v-else-if="item.ordersStatus == 5">已完成</text>
								<text class="text_9" v-else>已取消</text>
							</view>
							<text class="text_11" v-if="item.ordersType ==1">全流程咨询</text>
							<text class="text_11" v-else-if="item.ordersType ==2">设计优化</text>
							<text class="text_11" v-else-if="item.ordersType ==3">审核/合同签约</text>
							<text class="text_11" v-else-if="item.ordersType ==4">主材咨询</text>
							<text class="text_11" v-else-if="item.ordersType ==5">施工巡检</text>
							<text class="text_11" v-else-if="item.ordersType ==6">验收</text>
							<text class="text_11" v-else-if='item.ordersType ==7'>选材咨询</text>
							<text class="text_11" v-else-if='item.ordersType ==8'>全流程管家</text>
							<text class="text_11" v-else-if='item.ordersType ==9'>补价订单</text>
							<!-- <text class="text_13" v-if="item.ordersType ==1">全流程服务</text> -->
							<view class="flex-row group_7">
								<text class="text_15">应付款:</text>
								<view class="group_8">
									<text class="text_17">￥</text>

									<text class="text_19">{{item.payableMoney}}</text>
								</view>
							</view>
							<!-- 待付款 -->
							<view class="justify-end  group_9" v-if="item.ordersStatus == 1">
								<view class="flex-col items-center text-wrapper" @click.stop="cancel(item.ordersId,i)">
									<text class="text_21">取消订单</text>
								</view>
								<view class="flex-col items-center text-wrapper" @click.stop="seeexplan(item)"><text
										class="text_21">查看详情</text></view>
								<view class="flex-col items-center text-wrapper_2" @click.stop="topay(item.ordersId)">
									<text class="text_25">去付款</text>
								</view>
							</view>
							<!-- 待完善 -->
							<view class="justify-end  group_9" v-else-if="item.ordersStatus == 2">
								<view class="flex-col items-center text-wrapper"
									@click.stop="go('/pages/my/bill/informationBill?orderid='+item.ordersId)">
									<!-- <text class="text_21">申请开票</text> -->
									<text class="text_21" v-if="item.isSuccess==0">申请开票</text>
									<text class="text_21" v-if="item.isSuccess==1" style="color: crimson;"
										@click.stop="go('/pages/my/bill/bill?orderid='+item.ordersId)">已开票</text>
								</view>
								<view class="flex-col items-center text-wrapper" @click.stop="seeexplan(item)"><text
										class="text_21">查看详情</text></view>
							</view>
							<!-- 进行中 -->
							<view class="justify-end  group_9" v-else-if="item.ordersStatus == 3">

								<view class="flex-col items-center text-wrapper" @click.stop="seeexplan(item)"><text
										class="text_21">查看详情</text></view>

								<!-- <view class="flex-col items-center text-wrapper" @click.stop="changeorderStatus(item.ordersId)">
								<text class="text_21">完成订单</text>
							</view> -->
							</view>
							<!-- 待评价 -->
							<view class="justify-end  group_9" v-else-if="item.ordersStatus == 4">

								<view class="flex-col items-center text-wrapper" @click.stop="seeexplan(item)"><text
										class="text_21">查看详情</text></view>
								<view class="flex-col items-center text-wrapper_2"
									@click.stop="evaluate(item.ordersId)"><text class="text_25">评价</text></view>
								<!-- <view class="flex-col items-center text-wrapper"><text class="text_21">合同反馈</text></view> -->
							</view>
							<!-- 已完成 -->
							<view class="justify-end  group_9" v-else-if="item.ordersStatus == 5">



								<!-- <view class="flex-col items-center text-wrapper"
									@click.stop="go('/pages/my/bill/informationBill?orderid='+item.ordersId)"><text
										class="text_21">申请开票</text></view> -->

								<view class="flex-col items-center text-wrapper"
									@click.stop="go('/pages/my/bill/informationBill?orderid='+item.ordersId)">
									<!-- <text class="text_21">申请开票</text> -->
									<text class="text_21" v-if="item.isSuccess==0">申请开票</text>
									<text class="text_21" v-if="item.isSuccess==1" style="color: crimson;"
										@click.stop="go('/pages/my/bill/bill?orderid='+item.ordersId)">已开票</text>
								</view>

								<view class="flex-col items-center text-wrapper" @click.stop="seeexplan(item)"><text
										class="text_21">查看详情</text></view>
							</view>
							<!-- 取消订单 -->
							<view class="justify-end  group_9" v-else-if="item.ordersStatus == 6">
					
								<view class="flex-col items-center text-wrapper" @click.stop="seeexplan(item)"><text
										class="text_21">查看详情</text></view>
							</view>
						</view>
					</view>
					<view class="flex-col listnone" v-else>
						<u-empty style="height: 89vh;" width="250" mode="order" textSize="30rpx"
							icon="http://cdn.uviewui.com/uview/empty/order.png">
						</u-empty>
					</view>
				</view>
			</view>

		</scroll-view>

		<u-loadmore v-show="more" height="100" fontSize="26" :status="status" />
		<cancelOrder :show="cancelShow" @close="cancelShow = false" @confirm="confirm"></cancelOrder>
		<shop-share v-model="show"></shop-share>
	</view>
</template>

<script>
	import cancelOrder from "@/pages/my/order/cancelOrder.vue"
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			cancelOrder
		},
		onLoad(option) {
			// console.log(option);
			if (option.hasOwnProperty('index')) {
				this.index = option.index;
				this.subscript = this.index;
			}
			this.myordersL()
			uni.startPullDownRefresh();
		},
		data() {
			return {
				isSuccess: 0, //订单开票状态
				more: false,
				cancelShow: false,
				status: 'loading',
				list: [{
						name: '全部'
					}, {
						name: '待付款'
					}, {
						name: '待完善',
						count: 5
					},
					{
						name: '进行中',
						count: 5
					},
					{
						name: '待评价',

					},
					{
						name: '已完成',

					},
				],
				index: 0,
				orders: [],
				currentOrderid: 0,
				currentIndex: -1,
				show: false,
				showshare: false,
				param: {
					pageSize: 10,
					pageNum: 1
				},
				scrollHeight: 0
			};
		},
		onReady() {
			this.getScrollHeight();
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		onBackPress() {

		},
		methods: {
			dropDown() {
				let _this = this
				uni.startPullDownRefresh({
					success() {
						_this.myordersL()
					}
				})
			},
			confirm(v) {
				this.$http('mine.cancelOrdersL', {
					ordersId: this.currentOrderid,
					cancelReason: v
				}).then(r => {
					console.log(r);
					if (r.code = 200) {
						this.orders.splice(this.currentIndex, 1)
						this.cancelShow = false;
						setTimeout(() => {
							this.$u.toast('取消成功');
						})
					}
				});
			},
			getScrollHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select(".page").boundingClientRect();
				query.select("#tabs").boundingClientRect();
				query.exec((r) => {
					let [page, tab] = [...r]
					this.scrollHeight = page.height - tab.height;


				})
			},
			loadmore() {
				this.status = "loading";
				this.more = true;
				this.param.pageNum++;
				this.myordersL(1)
			},
			onPullDownRefresh() {

				this.param.pageNum = 1;
				this.myordersL()
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},

			shareFriend(orderid) {


				// #ifdef APP-PLUS


				this.showshare = true;
				this.$store.commit('shareInfo', {
					title: '邀请工长',
					path: this.$WEB_URL + 'pages/index/sharereg?ordersId=' + orderid,
					image: this.$IMG_URL+'login/logo.png'

				});
				// #endif
				// #ifdef H5
				uni.navigateTo({
					url: 'pages/index/sharereg?ordersId=' + orderid
				})
				// #endif
			},
			topay(item) {
				this.go('/pages/pay/pay?orderid=' + item);
			},
			change(item) {
				console.log(item);
				this.param.pageNum = 1;
				this.index = item.index;
				this.subscript;
				if (item.index == 0) {
					this.subscript = ''
				} else {
					this.subscript = item.index
				}
				this.myordersL();
			},
			myordersL(type = 0) {

				this.param.ordersStatus = this.subscript;
				this.$http('mine.myordersL', this.param).then(res => {
					if (res.code == 200) {
						if (type == 0) {
							this.orders = res.data;
							this.isSuccess = res.data[0].isSuccess; //订单开票状态
						} else {

							if (res.data.length > 0) {
								this.orders = this.orders.concat(res.data);
								this.status = "loadmore";
							} else {
								this.status = "nomore";

							}

						}

					}
				}).catch(err => {

				})
			},
			seeexplan(item) {
				// 1全流程咨询 2设计优化 3审核/合同签约 4主材咨询 5施工巡检 6验收 7选材咨询 8全流程管家
				if (item.ordersType == 2) {
					// 设计优化
					uni.navigateTo({
						url: '/pages/my/order/orderDetail6?ordersId=' + item.ordersId
					})
				} else if (item.ordersType == 1) {
					// 全流程咨询
					uni.navigateTo({
						url: '/pages/my/order/orderDetail?ordersId=' + item.ordersId
					})
				} else if (item.ordersType == 3) {
					// 审核 合同签约
					uni.navigateTo({
						url: '/pages/my/order/orderDetail5?ordersId=' + item.ordersId
					})
				} else if (item.ordersType == 4) {
					// 主材咨询
					// this.$u.toast('敬请期待');
					uni.navigateTo({
						url: '/pages/my/order/orderDetailZC?ordersId=' + item.ordersId
					})
				} else if (item.ordersType == 5) {
					// 施工巡检
					uni.navigateTo({
						url: '/pages/my/order/orderDetail4?ordersId=' + item.ordersId
					})
				} else if (item.ordersType == 6) {
					// 验收
					uni.navigateTo({
						url: '/pages/my/order/orderDetail2?ordersId=' + item.ordersId
					})
				} else if (item.ordersType == 7) {
					// 选材咨询
					// this.$u.toast('敬请期待');
					uni.navigateTo({
						url: '/pages/my/order/orderDetailXC?ordersId=' + item.ordersId
					})
				} else if (item.ordersType == 8) {
					// 全流程管家
					uni.navigateTo({
						url: '/pages/my/order/orderDetail8?ordersId=' + item.ordersId
					})
				} else if (item.ordersType == 9) {
					// 全流程管家
					uni.navigateTo({
						url: '/pages/my/order/orderDetail9?ordersId=' + item.ordersId
					})
				}
			},
			// 取消订单
			cancel(id, index) {
				this.cancelShow = true;
				this.currentOrderid = id;
				this.currentIndex = index;
				// uni.navigateTo({
				// 	url: '/pages/my/order/cancelOrder?ordersId=' + item
				// })
			},
			// 去评价
			evaluate(item) {
				uni.navigateTo({
					url: '/pages/my/evaluate/evaluate?ordersId=' + item
				})
			},
			back() {
				uni.switchTab({
					url: "/pages/index/my"
				})
			},
			// 改变订单状态
			changeorderStatus(item) {
				this.$http('mine.updateOrdersStatus', {
					ordersId: item,
					ordersStatus: '5'
				}).then(res => {
					if (res.code == 200) {
						this.evaluate(item)
					}
				}).catch(err => {

				})
			}
		},
	};
</script>

<style scoped lang="scss">
	
	.mtop {
		margin-top: 60rpx;
	}

	.listnone {
		font-size: 30rpx;
		text-align: center;
		line-height: 100rpx;
		color: #999;
	}

	

	.order {
		font-weight: bold;
	}

	.back {
		position: absolute;
		left: 14rpx;
	}

	.navbar {
		height: 44px;
		background-color: #ffffff;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.share {
		position: absolute;
		top: 120rpx;
		right: 0px;
		padding: 5rpx 0 15rpx;
		background-image: linear-gradient(90deg, #1d6aff33 0%, #1d6aff33 8.92%, #0f358000 100%, #0f358000 100%);
		border-radius: 24rpx 0px 0px 24rpx;
		width: 184rpx;
		height: 48rpx;
		text-align: center;
		line-height: 38rpx;
	}

	.share text {
		color: #1d6aff;
		font-size: 24rpx;
	}

	.tab-bar {
		background-color: #ffffff;
		padding: 0 20rpx;
	}

	/deep/ .u-tabs__wrapper__nav__line {
		left: 35rpx;
	}

	.list-item {
			position: relative;
		padding-left: 24rpx;
		padding-right: 23rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		
	}

	.group_6 {
		padding: 30rpx 0 35rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.text_11 {
		margin-top: 30rpx;
		align-self: flex-start;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_13 {
		margin-top: 22rpx;
		align-self: flex-start;
		color: #999999;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.group_7 {
		margin-top: 34rpx;
	}

	.group_9 {
		margin-top: 22rpx;
		padding: 25rpx 0 31rpx;
		border-top: solid 1rpx #eeeeee;
	}

	.text_7 {
		margin-top: 6rpx;
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_9 {
		margin-bottom: 6rpx;
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_15 {
		margin: 7rpx 0 3rpx;
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.group_8 {
		margin-left: 17rpx;
		height: 38rpx;
	}

	.text-wrapper {
		margin-right: 20rpx;

		background-color: #f6f7f9;
		border-radius: 24rpx;
		width: 148rpx;
		height: 48rpx;
		line-height: 48rpx;
	}

	.text-wrapper_1 {
		margin-right: 20rpx;

		background-color: #f6f7f9;
		border-radius: 24rpx;
		width: 148rpx;
		height: 48rpx;
	}

	.text-wrapper_2 {

		background-color: #1d6aff;
		border-radius: 24rpx;
		width: 148rpx;
		height: 48rpx;
		line-height: 48rpx;
	}

	.text_17 {
		color: #fe641a;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.text_19 {
		color: #fe641a;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_21 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 48rpx;
	}

	.text_23 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_25 {
		color: #ffffff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 48rpx;
	}

	.back-w {
		display: flex;
		flex-direction: row;
		padding-top: 50rpx;
		/* align-items: center; */
		width: 100vw;
		height: 90rpx;
		background-color: #ffffff;
	}

	.f-w-l {
		display: flex;
		flex-direction: row;
		font-weight: bold;
		margin-left: 33%;
	}

	.page {
		background-color: #f6f7f9ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
	}

	.group_3 {
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.list {
		padding: 24rpx 24rpx 17rpx;
	}

	.group_4 {
		overflow-x: hidden;
	}

	.section_4 {
		margin-left: 3rpx;
		margin-top: 27rpx;
		align-self: flex-start;
		background-color: #1d6aff;
		border-radius: 4rpx;
		width: 50rpx;
		height: 8rpx;
	}

	.list-item:not(:first-of-type) {
		margin-top: 20rpx;
	}

	.group_5 {
		flex-shrink: 0;
		width: 188rpx;
	}

	.text_3 {
		margin-left: 59rpx;
		flex-shrink: 0;
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_4 {
		margin-left: 58rpx;
		flex-shrink: 0;
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_5 {
		margin-left: 59rpx;
		flex-shrink: 0;
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_6 {
		margin-left: 58rpx;
		flex-shrink: 0;
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_1 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_2 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}
</style>
